<template>
  <div class="app-container">
    <!-- 添加或修改题库信息 -->
    <el-form ref="form" :model="form"  :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="题库名称" prop="questionBankName">
            <el-input
                    style="width: 95%;"
                    v-model="form.questionBankName"
                    placeholder="请输入题库名称"
                    clearable
                    size="small"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目代码" prop="projectCode">
            <el-select v-model="form.projectCode" @change="selectEvent(form.projectCode)" placeholder="项目代码" clearable
                       size="small" :disabled="form.questionBankId != undefined ? true :false">
              <el-option
                v-for="projectInfo in projectInfoList"
                :key="projectInfo.projectCode"
                :label="projectInfo.projectCode"
                :value="projectInfo.projectCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="projectName">
            <el-input style="width: 89%;"
              v-model="form.projectName"
              clearable
              size="small"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="理论分数" prop="theoryQualified">
            <el-input-number style="width: 89%;"
              v-model="form.theoryQualified"
              controls-position="right" :min="0"
              :max="150"
              placeholder="请输入理论合格分"
              :disabled="form.questionBankId != undefined ? true :false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实操分数" prop="practicalQualified">
            <el-input-number style="width: 89%;"
              v-model="form.practicalQualified"
              controls-position="right" :min="0"
              :max="150"
              placeholder="请输入实操合格分"
              :disabled="form.questionBankId != undefined ? true :false"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="理论总分" prop="theoryTotal">
            <el-input-number style="width: 89%;"
              v-model="form.theoryTotal"
              controls-position="right" :min="0"
              :max="150"
              placeholder="请输入理论总分"
              :disabled="form.questionBankId != undefined ? true :false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考试时长" prop="theoryDuration">
            <el-input-number style="width: 89%;"
              v-model="form.theoryDuration"
              controls-position="right" :min="0"
              :max="180"
              :disabled="form.questionBankId != undefined ? true :false"
              placeholder="请输入考试时长"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="题库类型" prop="questionBankType">
            <el-radio-group v-model="form.questionBankType">
              <el-radio v-for="dict in questionBankTypeOptions" @change="bankTypeEvent(form.questionBankType)"
                        :disabled="form.questionBankId != undefined ? true :false"
                        :label="dict.code"
                        :key="dict.code"
                        style="margin-right: 10px;">
                {{dict.name}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="专业组" prop="skillGroups" v-if="form.questionBankType == 1 ? hideSkill = true : hideSkill = false">
<!--            <el-input v-model="form.skillGroup" placeholder="请输入组别,隔开" clearable size="small"/>-->
            <el-select v-model="form.skillGroups" placeholder="请选择组别" default-first-option allow-create filterable size="small" multiple>
              <el-option v-for="dict in skillGroups"
                         :key="dict.code" :label="dict.name" :value="dict.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="等级" prop="skillGrade" v-if="form.questionBankType == 1 ? hideSkill = true : hideSkill = false">
<!--            <el-input v-model="form.skillGrade" placeholder="请输入等级" clearable size="small"/>-->
            <el-select v-model="form.skillGrade" placeholder="请选择上机等级" size="small">
              <el-option v-for="dict in levelOfOperationOptions"
                      :key="dict.code" :label="dict.name" :value="dict.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div class="dialog-footer" style="float:right;">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm('submit')">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import {getProjectByProjectCode, listProjectInfo} from "@/api/question/projectInfo";
  import {addQuestionBank, updateQuestionBank} from "@/api/question/questionBank";

  export default {
    name: "questionBankForm",
    props: {
      // 题库表单信息
      form: Object,
      questionBankTypeOptions: Array,
    },
    data() {
      return {
        // 按钮loading
        buttonLoading: false,
        // 等级和组别隐藏
        hideSkill: false,
        // 技能鉴定组别
        skillGroups: [],
        // 技能鉴定上机等级
        levelOfOperationOptions: [],
        // 表单校验
        rules: {
          projectCode: [
            {required: true, message: "项目代码不能为空", trigger: "blur"}
          ],
          projectName: [
            {required: true, message: "项目名称不能为空", trigger: "blur"}
          ],
          theoryQualified: [
            {required: true, message: "请输入理论合格分", trigger: "blur"}
          ],
          theoryTotal: [
            {required: true, message: "请输入理论总分", trigger: "blur"}
          ],
          theoryDuration: [
            {required: true, message: "请输入理论考试时长", trigger: "blur"}
          ],
          questionBankName: [
            {required: true, message: "题库名称不能为空", trigger: "blur"}
          ],
          questionBankType: [
            {required: true, message: "请选择题库类型", trigger: "blur"}
          ],
          skillGroups: [
            {required: true, message: "组别不能为空", trigger: "blur"}
          ],
          skillGrade: [
            {required: true, message: "等级不能为空", trigger: "blur"}
          ],
        },
        //立项项目下拉框
        projectInfoList: [],
      }
    },
    created() {
      //获取项目列表
      this.getProjectInfo();
      // 技能鉴定组别字典
      this.getDicts("skill_group").then(res => {
        this.skillGroups = res.responseBody.result
      })
      // 上机等级字典
      this.getDicts("exam_level_of_operation").then(res => {
        this.levelOfOperationOptions = res.responseBody.result
      })
    },
    methods: {
      //获取项目列表
      getProjectInfo() {
        var pageParams= {page: 1, rows: 10,}
        var quest = {
          // 仅获取已发布的培训项目
          projectStatus: 1,
        }
        listProjectInfo(
                {
                  'pageParameter': pageParams,
                  'searchParams': quest
                }
        ).then(response => {
          this.projectInfoList = response.responseBody.result;
        })
      },

      // 项目代码下拉框选中触发事件
      selectEvent(projectCode) {
        if (projectCode !== null && projectCode !== '') {
          // 根据项目代码查询项目名称及合格分值等信息
          getProjectByProjectCode(projectCode).then(response => {
            this.form.projectName = response.responseBody.projectName;
            this.form.theoryQualified = response.responseBody.theoryQualified;
            this.form.practicalQualified = response.responseBody.practicalQualified;
            this.form.theoryTotal = response.responseBody.theoryTotal;
            this.form.theoryDuration = response.responseBody.theoryDuration;
          })
        }
        this.form.projectName = undefined;
      },

      // 通过题库类型判断是否显示组别和等级
      bankTypeEvent(questionBankType) {
        if (questionBankType == 1) {
          this.hideSkill = true;
          return;
        }
        this.hideSkill = false;
        //  清空已选中的组别和等级
        this.form.skillGroups = undefined;
        this.form.skillGrade = undefined;
      },

      /** 提交按钮 */
      submitForm(flag) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            // 转化技能鉴定组别数组为字符串类型
            if (this.form.questionBankType === '1') {
              this.form.skillGroup = this.form.skillGroups.toString();
            }
            this.buttonLoading = true;
            if (this.form.questionBankId != null) {
              updateQuestionBank(this.form).then(response => {
                if (response.retCode === '200') {
                  if (response.responseBody === 0) {
                    this.$alert(response.message,'提示');
                    return;
                  }
                  this.msgSuccess(response.message);
                  // 关闭对话框
                  this.$emit("cancelDialog");
                  //刷新数据
                  this.$emit("submitForm")
                }
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addQuestionBank(this.form).then(response => {
                if (response.retCode === '200') {
                  if (response.responseBody === 0) {
                    this.$alert(response.message,'提示');
                    return;
                  }
                  this.msgSuccess(response.message);
                  // 关闭对话框
                  this.$emit("cancelDialog");
                  //刷新数据
                  this.$emit("submitForm")
                }
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },

      // 取消按钮
      cancel() {
        // 清空
        this.$emit("cancelDialog");
      },
    }

  }

</script>

<style scoped>

</style>
